import { defineComponent } from "vue";
import styles from "./settingCard.module.less";
import Title from "@/components/public/title/title";
const lessVars = require("@/styles/var");

export default defineComponent({
  props: {
    // 卡片标题
    title: {
      type: String,
      required: true,
    },
    // 标题文字大小
    titleSize: {
      type: String,
      default: lessVars['font-size-base'],
    },
  },
  // 插槽: tool右上角工具区，default卡片内容
  setup(props, { slots }: any) {
    const SettingCard = () => (
      <div class={styles.SettingCard}>
        <div class={styles.header}>
          <Title title={props.title} titleSize={props.titleSize}/>
          {slots?.tool && slots.tool()}
        </div>
        {slots?.default && slots.default()}
      </div>
    )
    return () => (
      <SettingCard />
    )
  }
})